<template>
	<view class="container">
		<image class="activity-img" :src="vdata.activityDetail.activityImg"></image>
		<view class="title">{{ vdata.activityDetail.activityName }}</view>
		<view>活动时间：{{ dayjs(vdata.activityDetail.startTime).format('YYYY[年]M[月]D[日]') }}~{{ dayjs(vdata.activityDetail.endTime).format('YYYY[年]M[月]D[日]') }}</view>
		<view>活动类型：{{ vdata.activityDetail.activityTypeName }}</view>
		<view v-if="vdata.flag == 0">活动状态：{{ '活动中' }}</view>
		<view v-else>活动状态：{{ '活动已结束' }}</view>
		<view>机构号：{{ vdata.activityDetail.agentNo }}</view>
		<view>机构名称：{{ vdata.activityDetail.agentName }}</view>
		<view style="position: relative;"><text style="position: absolute;top: 0;">活动规则：</text> <text style="display: block;padding-left: 5em;">{{ vdata.activityDetail.remark?.replace(/\\n/g,'\n') }}</text></view>
		<!-- <view>参与流程：
			<video v-if="vdata.activityDetail.participateVideoUrl" :src="vdata.activityDetail.participateVideoUrl" autoplay style="width: 100%;margin-top: 12rpx;" ></video>
			<template v-else>--</template>
		</view> -->
	</view>
</template>

<script setup>
	import dayjs from 'dayjs'
	import { onLoad } from '@dcloudio/uni-app'
	import { $activityDetail } from '@/http/marketing/apiMarketing.js'
	import { reactive, ref } from 'vue'
	import { formatRichText } from '@/util/htmlUtil.js'

	const vdata = reactive({
		activityDetail: {}, // 活动详情数据
		flag: 0, // 活动状态标志
	})


	onLoad(({ activityId, flag }) => {
		$activityDetail({ activityId }).then(({ bizData }) => {
			Object.assign(vdata.activityDetail,{ ...bizData, remark: formatRichText(bizData.remark) })
		})
		vdata.flag = flag
	})
</script>

<style lang="less">
	.container {
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		overflow: hidden;

		.activity-img {
			width: 100%;
			height: 372rpx;
			border-radius: 25rpx;

		}

		&>view {
			font-size: 24rpx;
			color: #999999;
			margin-bottom: 28rpx;
		}

		.title {
			margin: 36rpx 0;
			font-weight: 600;
			font-size: 38rpx;
			color: #333333;
		}
	}
</style>